<div class="option-box">
  <button nz-button nzType="primary" (click)="addMenu()">添加菜单</button>
  <button nz-button nzType="primary" [disabled]="!canDeal" (click)="delMenu()">删除菜单</button>
</div>

<div class="panel">
  <div class="menu-tree">
    <h4 class="title">菜单</h4>
    <nz-tree #tree [nzData]="treeData" [nzShowIcon]="true" [nzDefaultExpandAll]="true" (nzClick)="treeClick($event)"></nz-tree>
  </div>
  <div class="role-box">
    <h4 class="title">菜单名称</h4>
    <input nz-input [(ngModel)]="currentMenu.title">
    <h4 class="title">菜单代码</h4>
    <input nz-input [(ngModel)]="currentMenu.code">
    <h4 class="title">菜单图标<span>(anticon anticon-*)</span></h4>
    <input nz-input [(ngModel)]="currentMenu.icon">
    <h4 class="title">菜单链接</h4>
    <input nz-input [(ngModel)]="currentMenu.link">
    <h4 class="title">菜单父级ID</h4>
    <input nz-input [(ngModel)]="currentMenu.parentId">
    <h4 class="title">角色</h4>
    <nz-checkbox-group [(ngModel)]="currentRolesOptions" (ngModelChange)="changeRole($event)"></nz-checkbox-group>
    <div class="menu-save">
      <button nz-button nzType="primary" [disabled]="currentMenuIsEmpty" (click)="modify()">保存</button>
    </div>
  </div>
</div>




<nz-modal [(nzVisible)]="modalVisible" nzTitle="添加菜单" (nzOnCancel)="modalCancel()" (nzOnOk)="modalOk()">
  <form nz-form [formGroup]="menuForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">菜单名称</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="name" id="name">
        <nz-form-explain *ngIf="menuForm.get('name').dirty && menuForm.get('name').errors">菜单名称必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="code">菜单代码</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="code" id="code">
        <nz-form-explain *ngIf="menuForm.get('code').dirty && menuForm.get('code').errors">菜单代码必填!</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="icon">菜单图标</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="icon" id="icon" placeholder="anticon anticon-*">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="name">父级菜单</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-select nzShowSearch nzAllowClear nzPlaceHolder="" formControlName="parentMenu">
          <nz-option *ngFor="let item of notTopMenus" [nzLabel]="item.name" [nzValue]="item._id"></nz-option>
        </nz-select>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="link">菜单链接</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <input nz-input formControlName="link" id="link">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="roles">包含角色</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24">
        <nz-checkbox-group formControlName="roles"></nz-checkbox-group>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>